<template>
  <div class="headUserAgent">
    <div class="titel">
      <div class="title_name">
        <span>{{ lang.agente }}</span>
      </div>
    </div>
    <div class="headUserAgent-box">
      <div class="content">
        <div class="item">
          <span>{{ userStore.moneyUnit }} {{ money_1 }}</span
          ><span>{{ lang.agente_bonus_total }}</span>
        </div>
        <div class="item">
          <span>{{ userStore.moneyUnit }} {{ money_2 }}</span
          ><span>{{ lang.agente_bonus_restantes }}</span>
        </div>
      </div>
      <div class="c_box">
        <div class="c_box_link">
          <span>{{ lang.link_de_indicacao }}</span>
          <span class="share_link">{{ url }}</span>
          <span v-click-move @click="handleCopy(url)">{{ lang.copia }}</span>
        </div>
        <div class="qrBox">
          <div class="c_box_img_l">
            <span>{{ lang.compartilhar }}</span>
            <NuxtImg
              v-for="item in sharList"
              :key="item.id"
              :src="item.icon"
              v-click-move
              @click="share(item)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("user");

const userStore = useUserStore();

const money_1 = ref("0.00");
const money_2 = ref("0.00");
const url = ref("https://www.brz99.com/?code=4031730");
const sharList = ref([
  {
    id: 1,
    icon: "/images/user/treasureChest_1.png",
    platform: "facebook",
  },
  {
    id: 2,
    icon: "/images/user/treasureChest_2.png",
    platform: "whatsapp",
  },
  {
    id: 3,
    icon: "/images/user/treasureChest_3.png",
    platform: "telegram",
  },
]);
function share(item: any) {
  showNotify({
    type: "success",
    message: `分享到${item.platform}`,
  });
}

// 复制文本
function handleCopy(text: string) {
  copyText(text);
}
</script>

<style scoped lang="scss">
.headUserAgent {
  border-radius: 0.2rem;

  .titel {
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.2rem 0.2rem 0 0;

    .title_name {
      font-size: var(--font-title);
      font-weight: 800;
      color: var(--theme-neutral1);
    }
  }

  .headUserAgent-box {
    background: #3f2e4b;
    border-radius: 0.3rem;
  }

  .content {
    margin-top: 0.15rem;
    padding: 0.35rem 0.3rem 0.3rem;
    box-sizing: border-box;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;

    .item {
      display: grid;
      flex-direction: column;
      gap: 0.1rem;
      border-radius: 0.2rem;
      padding: 0.15rem 0.3rem;
      background: #291632;
      color: #86718c;
      justify-content: center;

      span:nth-child(1) {
        text-align: center;
        color: #ffd700;
        font-size: 0.44rem;
      }

      span:nth-child(2) {
        color: #86718c;
        font-size: 0.3rem;
      }
    }
    .item:nth-child(2) {
      span:nth-child(1) {
        color: #ffa200;
      }
    }
  }
}

.c_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.1rem 0.3rem;
  box-sizing: border-box;
  border-radius: 0.2rem;

  .c_box_link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem;
    background: #291632;
    border: 0.02rem solid var(--border-color);
    border-radius: 0.2rem;
    gap: 0.4rem;
    width: 100%;
    height: 1rem;

    span {
      font-family: Arial;
      font-weight: 100;
      font-size: 0.3rem;
      line-height: 0.36rem;

      &:nth-child(1) {
        color: #86718c;
      }

      &:nth-child(2) {
        color: #ffd700;
      }

      &:nth-child(3) {
        color: #00ff06;
      }
    }

    .share_link {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 4rem;
      height: 100%;
    }
  }

  .qrBox {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    margin-top: 0.34rem;
    margin-bottom: 0.36rem;

    .c_box_img_l {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      color: #86718c;
      span {
        margin-right: -0.2rem;
      }

      img {
        width: 0.72rem;
        height: 0.72rem;
      }
    }
  }
}
</style>
